<template>
  <div>
    <div v-if="showType === 1" class="coordinate-check-container active" @click="onClickEditPoint">
      <div>
        <span>N{{coordinateData.lat.deg}}°{{coordinateData.lat.min ? (coordinateData.lat.min < 10 ? `0${coordinateData.lat.min}` : coordinateData.lat.min) : '00'}}′{{coordinateData.lat.sec ? (coordinateData.lat.sec < 10 ? `0${coordinateData.lat.sec}` : coordinateData.lat.sec) : '00'}}″</span>
        <span>E{{coordinateData.lng.deg}}°{{coordinateData.lng.min ? (coordinateData.lng.min < 10 ? `0${coordinateData.lng.min}` : coordinateData.lng.min) : '00'}}′{{coordinateData.lng.sec ? (coordinateData.lng.sec < 10 ? `0${coordinateData.lng.sec}` : coordinateData.lng.sec) : '00'}}″</span>
      </div>
      <i class="icon-ali-bianji"></i>
    </div>
    <div class="coordinate-check-container disabled" v-if="showType === 2 && coordinateData.lat.deg && coordinateData.lng.deg">
      <div>
        <span>N{{coordinateData.lat.deg}}°{{coordinateData.lat.min ? (coordinateData.lat.min < 10 ? `0${coordinateData.lat.min}` : coordinateData.lat.min) : '00'}}′{{coordinateData.lat.sec ? (coordinateData.lat.sec < 10 ? `0${coordinateData.lat.sec}` : coordinateData.lat.sec) : '00'}}″</span>
        <span>E{{coordinateData.lng.deg}}°{{coordinateData.lng.min ? (coordinateData.lng.min < 10 ? `0${coordinateData.lng.min}` : coordinateData.lng.min) : '00'}}′{{coordinateData.lng.sec ? (coordinateData.lng.sec < 10 ? `0${coordinateData.lng.sec}` : coordinateData.lng.sec) : '00'}}″</span>
      </div>
    </div>
    <div class="coordinate-check-container" v-if="showType === 3" @click="onClickEditPoint">
      <span class="common-btn-text common-text-line">地名坐标</span>
    </div>
  </div>

</template>
<script>
  export default {
    props: {
      coordinateData: {
        type: Object,
        required: true,
        default: () => ({
          lng: {
            deg: '',
            min: '',
            sec: ''
          },
          lat: {
            deg: '',
            min: '',
            sec: ''
          }
        })
      },
      showType: {
        type: Number,
        required: false,
        default: 0,
      },    //显示的查看类型 1 显示坐标，可编辑；2 显示坐标，不可编辑；3 显示文案 “地名坐标”
    },
    data() {
      return {

      }
    },
    methods: {
      //点击编辑icon或者地名坐标
      onClickEditPoint() {
        this.$emit('onClickEditPoint');
      }
    }
  }
</script>
<style scoped>
  .coordinate-check-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 210px;
    height: 30px;
    background: #FAFAFD;
    border-radius: 2px;
    padding: 0 10px;
    color: #96A0B3;
    border: 1px solid transparent;
    font-size: 12px;
    cursor: pointer;
  }
  .coordinate-check-container.disabled {
    cursor: not-allowed;
  }
  .coordinate-check-container.active {
    color: var(--color-blue-main);
  }
  .coordinate-check-container.active:hover {
    background-color: #f4fdff;
    border: 1px solid #517EF6;
    box-shadow: 0px 0px 4px rgba(81,126,246,0.62);
  }
  .coordinate-check-container.active .icon-ali-bianji {
    display: none;
  }
  .coordinate-check-container.active:hover .icon-ali-bianji {
    display: block;
  }
</style>